<template>
  <div class="mark">
      <div class="small">
        <ul>
            <li v-for="(item, index) in list" :key="index">
                <input v-model="item.check" type="checkbox">
                {{ item.ball }}
            </li>
        </ul>
          <button @click="sendFalse">取消</button>
          <button @click="sendList">确定</button>
      </div>
  </div>
</template>

<script>
export default {
    data() {
         return {
             list: [
                 {
                     ball: "足球",
                     check: false
                 },
                 {
                     ball: "蓝球",
                     check: false
                 },
                 {
                     ball: "乒乓球",
                     check: false
                 }
             ]
         }
    },
    methods: {
        sendFalse() {
            this.$emit('send', false)
        },
        sendList() {
            this.$emit('sendList', this.list)
            this.$emit('send', false)
        }
    }
}
</script>

<style>
.mark {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    position: absolute;
    top: 0;
}

.small {
    width: 150px;
    height: 150px;
    background: #fff;
    margin-top: 100px;
    margin-left: 120px;
}
</style>